<script setup lang="ts">
	import { ref, onMounted, reactive, toRaw } from "vue";
  import { tasktallyApi, projectSelectApi, getProjectMonthly, tallyListApi, getProjectMoneyApi, getTaskMoneyApi } from "@/api/projectApi";
  import {  ChartLine, pieChart, ChartBar, ChartBarTaskvue } from "./charts";
  import GroupLine from "@iconify-icons/ri/group-line";
  import Question from "@iconify-icons/ri/question-answer-line";
  import CheckLine from "@iconify-icons/ri/chat-check-line";
  import Smile from "@iconify-icons/ri/star-smile-line";
  import { ReNormalCountTo } from "@/components/ReCountTo";
  import WelcomeTable from "./table/index.vue";
  onMounted(async()=>{
    getInitData()
    projectSelect()
    getUsertallyApi()
    getTallyList()
    getProjectMoney()
    getTaskMoneyData()
  })
  const initData = ref({})

  const projectSelect = async() => {
    const res: any = await projectSelectApi({type: 'all'})
    if(res?.code ===200) {
      chartData[0].value = res?.result.length
    }
  }
  const form = reactive({
    page: 1,
    perPage: 10,
    type: 'quarter'
  });
  const tableData = reactive({
    list: [],
    total: 0,
    pageSize: 999,
    currentPage: 1,
    loading: true
  })
  const getTallyList = async() => {
    tableData.loading = true
    const res: any = await tallyListApi(toRaw(form))
    tableData.list = res?.result?.list ?? []
    tableData.total = res?.result?.total ?? 0
    tableData.pageSize = res?.result?.perPage ?? 10
    tableData.currentPage = res?.result?.page ?? 1
    tableData.loading = false

  }
  const typeVal = ref(1)
  const getInitData = async() => {
    // 范围(year,quarter,month)
    let type = 'year'
    if(typeVal.value === 0) {
      type = 'year'
    } else if (typeVal.value === 1) {
      type = 'quarter'
    } else {
      type = 'month'
    }
    const res: any = await tasktallyApi({page: 1, perPage: 999, type: type})
    if(res?.code ===200) {
      let a = 0
      let ab = 0
      for (let item of res.result.list) {
        if(item.isOvertime > 0) {
          a++;
        } else {
          ab++;
        }
      }
      initData.value = {
        a: a,
        ab: ab,
        list: res.result.list ?? [],
        taskTypeAvgHours: res.result.taskTypeAvgHours ?? [],
      }
    }
  }
  const getTaskMoney = ref()
  const getTaskMoneyData = async() => {
    // 范围(year,quarter,month)
    let type = 'year'
    if(typeVal.value === 0) {
      type = 'year'
    } else if (typeVal.value === 1) {
      type = 'quarter'
    } else {
      type = 'month'
    }
    const res: any = await getTaskMoneyApi({type: type})
    getTaskMoney.value = res?.result
  }
  const chartData = reactive([
    {
      icon: CheckLine,
      bgColor: "#effaff",
      color: "#41b6ff",
      duration: 2200,
      name: "项目数量",
      value: 36000,
      percent: "0",
      data: [2101, 5288, 4239, 4962, 6752, 5208, 7450] // 平滑折线图数据
    },

  ]);
  const barChartData = ref()
  const getUsertallyApi = async() => {
    const res: any = await getProjectMonthly()
    if(res?.code ===200) {
      barChartData.value =res?.result ?? []
    }
  }
  const timeSelect = [
    { value: 'year', label: '近一年'},
    { value: 'quarter', label: '近三月'},
    { value: 'month', label: '近一月'},
  ]
  const timeValue = ref('quarter')
  const timeChange = (value) => {
    getTallyList()
  }
  const initEchartChange = async() => {
    typeVal.value ++;
    if(typeVal.value > 2) {
      typeVal.value = 0
    }
    await getInitData()
    await projectSelect()
    await getProjectMoney()
    await getTaskMoneyData()
  }
  const projectMoney = ref()
  const getProjectMoney = async() => {
    let type = 'year'
    if(typeVal.value === 0) {
      type = 'year'
    } else if (typeVal.value === 1) {
      type = 'quarter'
    } else {
      type = 'month'
    }
    const res: any = await getProjectMoneyApi({type: type})
    projectMoney.value = res?.result[0] ?? {}
  }
</script>

<template>
  <div class="main-content">
    <el-row :gutter="24" justify="space-around">
      <!-- <re-col class="el-col el-col-24 el-col-xs-24 el-col-sm-15 el-col-md-15 el-col-lg-15 el-col-xl-15 mb-[18px]">

        <el-card>
          <div class="flex justify-between">
            <span class="text-md font-medium">数据统计</span>
            <el-select
                v-model="form.type"
                placeholder="请选择范围"
                style="width: 160px"
                @change="timeChange"
              >
                <el-option
                  v-for="item in timeSelect"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
          </div>
          <WelcomeTable style="height: 529px;" class="mt-3" :data="tableData"  v-if="!tableData.loading"/>
        </el-card>

      </re-col> -->
      <el-col :span="16">
        <el-card class="line-card" shadow="never" v-if="barChartData" @click="initEchartChange">
          <div class="flex justify-between">
            <span class="text-md font-medium">分析概览
            <!-- (<span v-if="typeVal === 0">近一年</span>
            <span v-if="typeVal === 1">近三月</span>
            <span v-if="typeVal === 2">近一月</span>) -->
            </span>
          </div>
          <ChartBar :requireData="barChartData"/>
        </el-card>
      </el-col>
      <el-col :span="8">

        <el-row :gutter="24" justify="space-around">
          <el-col
            v-for="(item, index) in chartData"
            :key="index"
            v-motion
            class="mb-[18px]"
            :span="8"
            :md="24"
            :sm="24"
            :xs="24"
            :initial="{
              opacity: 0,
              y: 100
            }"
            :enter="{
              opacity: 1,
              y: 0,
              transition: {
                delay: 80 * (index + 1)
              }
            }"
          >
            <el-card class="line-card" shadow="never"  @click="initEchartChange">
              <div class="flex justify-between">
                <span class="text-md font-medium">
                  {{ item.name }}(<span v-if="typeVal === 0">近一年</span>
            <span v-if="typeVal === 1">近三月</span>
            <span v-if="typeVal === 2">近一月</span>)
                </span>
                <div
                  class="w-8 h-8 flex justify-center items-center rounded-md"
                >
                  <IconifyIconOffline
                    :icon="item.icon"
                    :color="item.color"
                    width="18"
                  />
                </div>
              </div>
              <div class="flex justify-between items-start mt-3">
                <div class="w-1/2">
                  <ReNormalCountTo
                    :duration="item.duration"
                    :fontSize="'1.6em'"
                    :startVal="100"
                    :endVal="item.value"
                  />
                  <p class="font-medium text-green-500">完成项目(个)：{{ item.percent }}</p>

                </div>

                <ChartLine
                  class="!w-1/2"
                  :color="item.color"
                  :data="item.data"
                />

              </div>
              <div style="align-items: center;">
                <p class="font-medium text-green-500">销售金额(元)：{{ projectMoney?.totalProjectAmount ?? 0 }}</p>
                <p class="font-medium text-green-500">开票金额(元)：{{ projectMoney?.totalInvoiceAmount ?? 0 }}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card class="line-card  mb-[18px]" shadow="never" v-if="getTaskMoney">
          <div class="flex justify-between mb-2">
            <span class="text-md font-medium">收款统计(
            <span v-if="typeVal === 0">近一年</span>
            <span v-if="typeVal === 1">近三月</span>
            <span v-if="typeVal === 2">近一月</span>
            )</span>
          </div>
          <pieChart class="echart" :data="getTaskMoney" @click="initEchartChange"/>
        </el-card>
      </el-col>
      <re-col class="el-col el-col-24 el-col-xs-24 el-col-sm-24 el-col-md-24 el-col-lg-24 el-col-xl-24 mb-[18px]"
      style="padding-right: 12px;padding-left: 12px;"  @click="initEchartChange">
        <el-card class="line-card" shadow="never" v-if="initData">
          <div class="flex justify-between">
            <span class="text-md font-medium">逾期统计(<span v-if="typeVal === 0">近一年</span>
            <span v-if="typeVal === 1">近三月</span>
            <span v-if="typeVal === 2">近一月</span>)</span>
          </div>
          <ChartBarTaskvue :requireData="initData"/>
        </el-card>
      </re-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
	:deep(.el-card) {
	  --el-card-border-color: none;

	  /* 解决概率进度条宽度 */
	  .el-progress--line {
	    width: 85%;
	  }

	  /* 解决概率进度条字体大小 */
	  .el-progress-bar__innerText {
	    font-size: 15px;
	  }

	  /* 隐藏 el-scrollbar 滚动条 */
	  .el-scrollbar__bar {
	    display: none;
	  }

	  /* el-timeline 每一项上下、左右边距 */
	  .el-timeline-item {
	    margin: 0 6px;
	  }
	}

	.main-content {
	  margin: 20px 20px 0 !important;
	}
</style>
